<template>
  <div class="intelligent-video-container">
    <transition name="fade-left">
      <div class="left-con" v-show="isShowLeft">
        <div class="new-left-bottom-con">
          <div class="part-header-con">最新违规行为详情</div>
          <div class="part-content-con">
            <div style="width: 100%; height: 100%">
              <div
                style="
                  width: 100%;
                  height: 100%;
                  padding: 5px;
                  overflow: hidden;
                "
              >
                <div class="imgs-container" v-if="data2.length">
                  <div
                    class="img-conta"
                    v-for="(item, index) in data2"
                    :key="index"
                  >
                    <div>
                      <img
                        @click.prevent.stop="handleImgClick(item)"
                        :src="item.url"
                        alt=""
                      />
                    </div>
                    <div>
                      <p>
                        <span>时间:</span>
                        <span>{{ item.time }}</span>
                      </p>
                      <p>
                        <span>人员:</span>
                        <span>{{ item.person }}</span>
                      </p>
                      <p>
                        <span>点位:</span>
                        <span>{{ item.point }}</span>
                      </p>
                      <p>
                        <span>类型:</span>
                        <span>{{ item.type }}</span>
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </transition>
    <transition name="fade-right">
      <div class="right-con" v-show="isShowRight">
        <div class="right-top-con">
          <div class="part-header-con">
            <el-select v-if="options.length" v-model="value" size="mini" @change="handleSelectChange">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <div class="part-content-con">
            <iframe
              v-if="videoUrl"
              :src="videoUrl"
              frameborder="0"
              webkitallowfullscreen=""
              mozallowfullscreen=""
              allowfullscreen=""
            ></iframe>
          </div>
        </div>
        <div class="left-top-con">
          <div class="part-header-con">违规识别一周统计图</div>
          <div class="part-content-con" ref="barCon"></div>
        </div>
        <div class="right-center-con">
          <div class="part-header-con">
            违规事件统计
            <el-select
              v-model="value2"
              size="mini"
              @change="handleSelectChange2"
            >
              <el-option
                v-for="item in new Date().getMonth() + 1"
                :key="item"
                :label="new Date().getFullYear() + '-' + item + '月'"
                :value="item"
              >
              </el-option>
            </el-select>
          </div>
          <div
            style="padding-bottom: 10px"
            class="part-content-con"
            ref="pieCon"
          ></div>
        </div>
      </div>
    </transition>
    <el-dialog
      :title="dialogTitle + '-违规行为智能监控'"
      :visible.sync="dialogVisible"
      width="1324px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <div class="dialog-container">
        <div class="dialog-left">
          <iframe
            v-if="iframeUrl"
            :src="iframeUrl"
            webkitallowfullscreen=""
            mozallowfullscreen=""
            allowfullscreen=""
            frameborder="0"
          ></iframe>
        </div>
        <div class="dialog-right">
          <div class="dialog-right-top">
            <div class="imgs-container" v-if="data3.length">
              <div
                class="img-conta"
                v-for="(item, index) in data3"
                :key="index"
              >
                <div>
                  <img
                    @click.prevent.stop="handleImgClick(item)"
                    :src="item.url"
                    alt=""
                  />
                </div>
                <div>
                  <p>
                    <span>时间:</span>
                    <span>{{ item.time }}</span>
                  </p>
                  <p>
                    <span>人员:</span>
                    <span>{{ item.person }}</span>
                  </p>
                  <p>
                    <span>点位:</span>
                    <span>{{ item.point }}</span>
                  </p>
                  <p>
                    <span>类型:</span>
                    <span>{{ item.type }}</span>
                  </p>
                </div>
              </div>
            </div>
          </div>
          <div class="dialog-right-bottom">
            <el-table :data="data4">
              <el-table-column prop="violations" label="违规行为" width="100">
              </el-table-column>
              <el-table-column
                prop="identifyLocation"
                label="识别位置"
                width="150"
              >
              </el-table-column>
              <el-table-column prop="time" label="时间" width="180">
              </el-table-column>
              <el-table-column prop="personName" label="违规人员" width="100">
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </el-dialog>

    <el-dialog
      :title="imgDialogTitle"
      :visible.sync="imgDialogVisible"
      width="900px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <div class="dialog-img-con">
        <img :src="currentImg" :alt="imgDialogTitle" />
      </div>
    </el-dialog>
  </div>
</template>

<script>
// import * as echarts from 'echarts'
import videoImg from '@/assets/intelligent-video/桥上站台.jpg'
import wonderland from './mock/walden.json'

import {
  GetAlarmTypeStatistical,
  GetWeekAlarmTypeStatistical,
  GetViolationsAlarmList
} from '@/api/people-grid/index.js'

import { GetVideoList } from '@/api/main'

export default {
  data () {
    this.barOptions = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      legend: {
        orient: 'horizontal',
        right: '2%',
        itemWidth: 16, // 图例的宽
        data: '',
        textStyle: {
          fontSize: 12, // 字体大小
          color: '#ffffff' // 字体颜色
        }
      },
      grid: {
        left: '12%',
        right: '4%',
        bottom: '12%',
        top: '15%'
      },
      xAxis: {
        type: 'category',
        data: [],
        axisLine: {
          lineStyle: {
            color: ['rgba(21, 238, 212, 30%)']
          }
        },
        axisLabel: {
          textStyle: {
            color: '#fff'
          }
        }
      },
      yAxis: {
        name: '单位: 次',
        type: 'value',
        axisLine: {
          lineStyle: {
            color: ['rgba(255, 255, 255, 100%)']
          }
        },
        minInterval: 1,
        axisLabel: {
          textStyle: {
            color: '#fff' // 更改坐标轴文字颜色
          }
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: ['rgba(21, 238, 212, 30%)'],
            width: 1,
            type: 'solid'
          }
        }
      },
      series: [
        {
          name: '风险总计',
          type: 'bar',
          stack: '总量',
          barWidth: '30%',
          data: [],
          itemStyle: {
            normal: {
              color: '#01d6ba'
            }
          }
        }
      ]
    }
    this.barCharts = null
    this.pieOptions = {
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)'
      },
      legend: {
        left: 'center',
        top: 'bottom',
        data: []
      },
      series: [
        {
          name: '访问来源',
          type: 'pie',
          radius: '70%',
          center: ['50%', '45%'],
          data: [],
          label: {
            show: true,
            fontSize: 12,
            fontWeight: 'bold',
            color: 'white'
          },
          labelLine: {
            show: true,
            lineStyle: {
              width: 3
            }
          }
        }
      ]
    }
    this.pieCharts = null

    return {
      dialogVisible: false,
      imgDialogVisible: false,
      imgDialogTitle: '',
      currentImg: '',
      dialogTitle: '',
      isShowLeft: false,
      isShowRight: false,
      iframeUrl: '',
      videoUrl: '',
      data1: [],
      value: '10',
      value2: new Date().getMonth() + 1,
      videoImg: videoImg,
      data2: [],
      data3: [],
      data4: [],
      options: []
    }
  },
  inject: ['getViewer', 'handleHtmlLabelShow', 'handleModelDisplay'],
  beforeDestroy () {
    this.removeResizeListener()
    this.resetCharts = null
    this.isShowLeft = false
    this.isShowRight = false
    clearTimeout(this.timer)
  },
  deactivated () {
    this.removeResizeListener()
    this.resetCharts = null
    this.isShowLeft = false
    this.isShowRight = false
    clearTimeout(this.timer)
  },
  activated () {
    this.isShowLeft = true
    this.isShowRight = true

    this.cameraFlyTo()

    setTimeout(() => {
      if (process.env.NODE_ENV === 'development') {
        this.handleModelDisplay([])
      } else {
        this.handleModelDisplay(['xiangmbTileset'])
      }
      this.handleHtmlLabelShow([
        {
          type: '2-1',
          handler: function (event) {
            this.dialogVisible = true
            this.dialogTitle = event.target.messageText
            const { monitorUrl } = event.target.params.MessageProperty.Json
            this.iframeUrl = monitorUrl

            this.makeDialogData(event)
          }.bind(this)
        },
        {
          type: '2-2',
          handler: function (event) {
            this.dialogVisible = true
            this.dialogTitle = event.target.messageText
            const { monitorUrl } = event.target.params.MessageProperty.Json
            this.iframeUrl = monitorUrl

            this.makeDialogData(event)
          }.bind(this)
        }
      ])
    }, 500)

    this.getAlarmTypeStatistical(this.value2)
    this.getWeekAlarmTypeStatistical()
    this.getViolationsAlarmList(false)

    this.getVideoList()

    if (!this.resetCharts) {
      this.addResizeListener()
    }
  },
  methods: {
    getVideoList () {
      GetVideoList().then(res => {
        console.log(res)
        if (res && res.data && res.data.length) {
          const list = res.data.filter(item => item.IP.startsWith('http')).map((item, index) => {
            return {
              value: index,
              label: item.VideoName,
              url: item.IP
            }
          })
          this.options = list
          this.value = list[0].value
          this.videoUrl = list[0].url
          console.log(list)
        }
      })
    },
    handleSelectChange2 (e) {
      this.getAlarmTypeStatistical(e)
    },
    handleImgClick (data) {
      console.log(data)
      this.imgDialogTitle = data.type + '-' + data.time
      this.currentImg = data.url
      this.imgDialogVisible = true
    },
    makeDialogData (event) {
      this.data3 = this.datalist
        .filter((item) => {
          return item.VideoName.includes(event.target.textContent)
        })
        .map((item) => {
          return {
            url: 'http://58.49.74.231:85' + item.ViolationPhoto,
            time: item.time,
            person: item.Name || '未识别',
            point: item.VideoName,
            type: item.Event_description
          }
        })

      this.data4 = this.datalist
        .filter((item) => {
          return item.VideoName.includes(event.target.textContent)
        })
        .map((item) => {
          return {
            time: item.time,
            personName: item.Name || '未识别',
            identifyLocation: item.VideoName,
            violations: item.Event_description
          }
        })
    },
    handleSelectChange (e) {
      // console.log(e)
      // console.log(this.options[e].url)
      this.videoUrl = this.options[e].url
    },
    getViolationsAlarmList (lazy) {
      GetViolationsAlarmList(200).then((res) => {
        const data = res.data
        this.datalist = data

        this.data2 = data.filter(item => {
          return !item.VideoName.includes('塔吊')
        }).map((item) => {
          return {
            url: 'http://58.49.74.231:85' + item.ViolationPhoto,
            time: item.time,
            person: item.Name || '未识别',
            point: item.VideoName,
            type: item.Event_description
          }
        })
      })
    },
    getAlarmTypeStatistical (month) {
      const nowYear = new Date().getFullYear()
      const nowMonth = ('0' + month).slice(-2)
      GetAlarmTypeStatistical(`${nowYear}-${nowMonth}`).then((res) => {
        if (!res.success) return
        const data = res.data.filter(item => item.name !== '未穿救生衣')
debugger
        this.pieOptions.legend.data = data.map((item) => item.name)
        this.pieOptions.series[0].data = data

        this.initPie()
      })
    },
    getWeekAlarmTypeStatistical () {
      GetWeekAlarmTypeStatistical().then((res) => {
        if (!res.success) return
        const data = res.data

        this.barOptions.xAxis.data = data.map((item) => item.name)
        this.barOptions.series[0].data = data.map((item) => item.value)

        this.initBar()
      })
    },
    cameraFlyTo () {
      const viewer = this.getViewer()
      viewer.camera.flyTo({
        destination: {
          x: -2704875.2683794904,
          y: 4690617.451492575,
          z: 3359662.2358672866
        },
        orientation: {
          heading: 0.4177643320855484,
          pitch: -0.4383428005528307,
          roll: 0.0013520971019627126
        }
      })
    },
    addResizeListener () {
      window.addEventListener(
        'resize',
        (this.resetCharts = () => {
          this.initBar()
          this.initPie()
        })
      )
    },
    removeResizeListener () {
      window.removeEventListener('resize', this.resetCharts)
    },
    initBar () {
      this.$refs.barCon.removeAttribute('_echarts_instance_')
      this.barCharts = echarts.init(this.$refs.barCon)
      this.barCharts.setOption(this.barOptions, true)
    },
    initPie () {
      this.$refs.pieCon.removeAttribute('_echarts_instance_')
      this.pieCharts = echarts.init(this.$refs.pieCon, wonderland)
      this.pieCharts.setOption(this.pieOptions, true)
    }
  }
}
</script>

<style lang="less">
@import url("./index.less");
</style>
